<template>
    <div>
        <div class="detali_box_img video-media">
            <div class="nbox">
                <div class="video-example">
                <video :src="item" width="100%" height="100%" loop="loop" preload="auto" @timeupdate="videoTimeUpdate" @click="controlVideo" ref="videoCon">
                您的浏览器不支持 video 标签。
                </video>
                </div>
                <div class="video-example">
                <video :src="item2" width="100%" height="100%" loop="loop" preload="auto" @timeupdate="videoTimeUpdate2" @click="controlVideo2" ref="videoCon2">
                您的浏览器不支持 video 标签。
                </video>
                </div>
                <div class="chat">
                    <linec :dins = vcProgress></linec>
                </div>
            </div>
            <div class="play-btn" @click="controlVideo" :style="[opcityVal]"></div>
            <!-- // 控制条的播放和暂停按钮 -->
            <div class="control-play">
            <p class="control-play-btn" @click="playRadio">
            <span class="el-icon-video-play" v-show="!vcIsPlay"></span>
            <span class="el-icon-video-pause" v-show="vcIsPlay"></span>
            </p>
            <!-- //播放进度条 -->
            <div class="control-progress common-progress">
            <div>
            <el-slider v-model="vcProgress" :show-tooltip="false" :max="durationProgress" input-size="small" @change="getNewTime"></el-slider>
            </div>
            <!-- <p class="control-progress-item"></p> -->
            </div>
            <!-- //当前播放时间 -->
            <div class="current-time">{{vcCurrentTime}}</div>
            <!-- //视频总时长 -->
            <div class="duration">{{item.duration_time}}</div>
            <!-- //倍速控制 -->
            <!-- <el-dropdown placement="bottom" @command="handleCommand">
            <span class="video-speed-show">{{speedTime}}</span>
            <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">0.5x</el-dropdown-item>
            <el-dropdown-item command="2">1x</el-dropdown-item>
            <el-dropdown-item command="3">1.5x</el-dropdown-item>
            <el-dropdown-item command="4">2x</el-dropdown-item>
            <el-dropdown-item command="5">3x</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown> -->
            </div>
            
            <!-- //音量控制 -->
            <!-- <div class="control-voice common-progress">
            <span class="voice-icon"></span>
            <div class="voice-slider">
            <el-slider v-model="voiceProgress" input-size="small" @change="getNewVoice"></el-slider>
            </div>
            </div> -->
            <!-- //全屏播放 -->
            <!-- <p class="fullscreen" title="全屏" @click="getFullSceen">
            <span class="el-icon-full-screen"></span>
            </p> -->
        </div>
    </div>
</template>

<script>
    import linec from '@/components/line'
    import poal from '@/components/bar'
    export default {
        components: {
            linec,
            poal
        },
     data() {
         return {
                item:'https://www.joinca.com/api/common/resources/407bdbf2ee35485997cdf9663f1272cf.mp4',
                item2:'https://www.joinca.com/api/common/resources/b29c6f0693b6461e9ee641561df02fca.mp4',
                vcIsPlay: false, //是否播放
                vcIsPlay2: false, //是否播放
                opcityVal: {
                opacity: '1'
                },
                myins:0,
                currentTimeVal: 0, // 当前时间
                vcCurrentTime: '00:00:00', //当前时间格式化
                vcProgress: 0, //进度条的绑定时间
                durationProgress: 0, //当前视频的总时长
                speedTime: '1x', //倍速
                voiceProgress: 0 //声音
         }
     },
     created () {
        //  this.videoTimeUpdate()
       
     },
     mounted () {
         setTimeout(() => {
            this.playRadio() ;
            // this.controlVideo2() ;
            
         }, 1000);
     },
     methods: {
         playRadio(){
             this.controlVideo()
             this.controlVideo2()
         },
         // 播放和暂停视频
        controlVideo(videoCon) {
            let videoObj = this.$refs.videoCon
            console.log(videoObj.duration)
            this.durationProgress = videoObj.duration //总时间

            if (this.vcIsPlay) {
            videoObj.pause()
            } else {
            videoObj.play()
            }
            this.vcIsPlay = !this.vcIsPlay
            this.opcityVal.opacity = this.opcityVal.opacity == '1' ? '0' : '1'
        },
        // 获取时间
        videoTimeUpdate(videoCon) {
            let videoObj = this.$refs.videoCon
            console.log(videoObj)
            let currTime = videoObj.currentTime || 0//当前时间
            this.vcProgress = currTime //赋值给进度条
            console.log('vcProgress',this.vcProgress)
            this.vcCurrentTime = this.getFormatVideoTime(currTime)
            console.log(this.vcCurrentTime) //"00:00:27"
            },
         // 播放和暂停视频
        controlVideo2() {
            let videoObj = this.$refs.videoCon2
            console.log(videoObj.duration)
            this.durationProgress = videoObj.duration //总时间

            if (this.vcIsPlay2) {
            videoObj.pause()
            } else {
            videoObj.play()
            }
            this.vcIsPlay2 = !this.vcIsPlay2
            this.opcityVal.opacity = this.opcityVal.opacity == '1' ? '0' : '1'
        },
        // 获取时间
        videoTimeUpdate2() {
            let videoObj = this.$refs.videoCon2
            console.log(videoObj)
            let currTime = videoObj.currentTime || 0//当前时间
            this.vcProgress = currTime //赋值给进度条
            this.vcCurrentTime = this.getFormatVideoTime(currTime)
            console.log(this.vcCurrentTime) //"00:00:27"
            },   
            //格式化时间
        getFormatVideoTime(time) {
            let curtime = time
            let h = parseInt(curtime / 3600)
            let m = parseInt((curtime % 3600) / 60)
            let s = parseInt(curtime % 60)
            h = h < 10 ? '0' + h : h
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            return h + ':' + m + ':' + s
        },
        getNewTime(val) {
            let videoObj = this.$refs.videoCon
            let videoObj2 = this.$refs.videoCon2
            console.log(val)
            videoObj.currentTime = val || 0
            videoObj2.currentTime = val || 0
        },
        // 获取当前播放的速度
        handleCommand(val) {
        let videoObj = this.$refs.videoCon
        switch (val) {
        case '1':
        videoObj.playbackRate = 0.5
        this.speedTime = '0.5x'
        break
        case '2':
        videoObj.playbackRate = 1
        this.speedTime = '1x'
        break
        case '3':
        videoObj.playbackRate = 1.5
        this.speedTime = '1.5x'
        break
        case '4':
        videoObj.playbackRate = 2
        this.speedTime = '2x'
        break
        case '5':
        videoObj.playbackRate = 3
        this.speedTime = '3x'
        break

        default:
        videoObj.playbackRate = 1
        this.speedTime = '1x'
        break
        }
        },
        // 设置声音

        getNewVoice(val) {
        let videoObj = this.$refs.videoCon
        let newVc = val / 100 //h5规定,volume的值必须再0-1之间,比如0.5就是50%的音量,但是进度条的值为100,因此这里做个除法
        videoObj.volume = newVc //赋值
        },
        // 全屏播放
        getFullSceen() {
        let videoObj = this.$refs.videoCon
        videoObj.webkitRequestFullScreen()
        },
     },   
    }
</script>

<style scoped>
.nbox{
    width:100%;
    height: 500px;
}
.video-example{
    width: 500px;
    height: 500px;
    float: left;
}
.chat{
    float:left;
    width:500px;
    height: 500px;
}
</style>